ionic4+angular8项目实践中,以及打包原生Android(xxx.apk)文件 |
您所在的位置：网站首页 › angular 项目打包 › ionic4+angular8项目实践中,以及打包原生Android(xxx.apk)文件 |
ionic4+angular8项目实践中,以及打包原生Android(xxx.apk)文件
|
1.ionic+angular ionic官网:https://ionicframework.com/docs/v4/components 命令新建文件:ionic g page pages/my-risk-management(pages:是项目app下的文件,/my-risk-management是文件名)会生成:  这是一位大牛 写的案列,
html:
{{ mapGroupName(item.group) }}
{{ item.measures }}
ts:
mapGroupName(code) {////注意.这块的用法
const mapper = {
notOnWork: '未涉及',
ctrl: '管控中',
notCtrl: '未管控',
ctrlRight: '管控到位',
notCtrlRight: '待加强',
overdueCtrl: '管控逾期',
};
return mapper[code];
}
getLabelClass(code) {////注意.这块的用法
const mapper = {
ctrl: 'heading--blue',
notCtrlRight: 'heading--yellow',
ctrlRight: 'heading--green',
overdueCtrl: 'heading--red',
notCtrl: 'heading--orange',
notOnWork: 'heading--gray',
};
return mapper[code];
}
queryGroupMeasures() {
this.service
.queryMeasuresByGroup(this.item.riskOrderId)
.subscribe(({ code, data }) => {
if (200 === code) {
this.groupResult = data;
const {
ctrl,
notCtrl,
ctrlRight,
overdueCtrl,
notCtrlRight,
notOnWork,
} = data;
this.controllingCount = ctrl.count;
this.notControlCount = notCtrl.count;
this.controlInPlaceCount = ctrlRight.count;
this.controlOverdueCount = overdueCtrl.count;
this.toBeStrengthenedCount = notCtrlRight.count;
this.notInvolvingCount = notOnWork.count;
}
});
}
get list() { ////注意.这块的用法
if (!this.groupResult) return [];
const temp = [
'all',
'ctrl',
'notCtrlRight',
'ctrlRight',
'overdueCtrl',
'notCtrl',
'notOnWork',
];
return this.groupResult[temp[this.activeLabel]].measuresList;
}2,ionic4 popover的用法(在官网中一个简单的列子,无法实现)  第一步;创建模板 第二步,跟其它组件的区别 第三步 比较重要,其它组件不需要在这引ionic4 生命周期: ionViewDidLoad(){
console.log("1.0 ionViewDidLoad 当页面加载的时候触发，
仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");
}
ionViewWillEnter(){
console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");
}
ionViewDidEnter(){
console.log("3.0 ionViewDidEnter 当进入页面时触发");
}
ionViewWillLeave(){
console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");
}
ionViewDidLeave(){
console.log("5.0 ionViewDidLeave 离开页面时触发");
}
我项目中的场景是,所有模块首次进入都会重新加载,
但从二级或者三级页面一层层的返回按钮返回,都是不刷新当前页面,但有个别页面需求比如三级页面做了新增,
更新的话返回到一级页面需要刷新当前页面的,
用的方法是:
ionViewDidEnter(){ //每次进入有这个方法的页面 都会执行此方法
console.log("3.0 ionViewDidEnter 当进入页面时触发");
}ionic官网视频学习笔记1,如何升级angular-cli最新版本? npm uninstall -g angular-cli npm cache clean npm install -g @angular/cli@latest 注:用1.几的版本 ng new xxx 项目之后ng serve --open 结果报错,跑不起来,升级到10.几最新版之后,结果好了!2,注解:  3, 项目创建 仅仅是angular项目 1, ng new xxx //一下是步骤,完成之后 下载依赖的时候是npm 比较慢,可以终止,换成cnpm angular+ioni项目创建 2,首先要安装 cnpm i ionic cordova (ionic -v cordova -v)//安装最新版 ionic 官网 https://ionicframework.com/start#basics ionic start angularIonic tabs //创建时会让你选择是react和angular 上下键选择 //创建带tab的angularIonic名称的项目(官网有案例,angular react)  注意咯:项目启动的时候1,仔细看报错信息-----4200 端口被占用 提示用"--port"修改端口号,2,网上给的有:ng serve --port 4203 //我得项目报错 不知何故 ng serve --port=4203 ok 2,创建组件: ng g component components/newDemo //创建组件---生成之后的如下 ionic+angular 项目创建首先要安装 cnpm i ionic cordova (ionic -v cordova -v)
//安装最新版 ionic 官网 https://ionicframework.com/start#basics
ionic start angularIonic tabs
//创建时会让你选择是react和angular 上下键选择 注意:名称不能有汉字.空格
//创建带tab的angularIonic名称的项目(官网有案例,angular react)    /*自定义组件模块,在多个模块中引用*/    安装android studio 为了打包成apk:详情以下:此文章中对创建一个新的虚拟设备 有点模糊,以下解说:  gradle安装与配置下载地址:https://services.gradle.org/distributions/  详情: https://blog.csdn.net/yw00yw/article/details/89224971 SDK环境变量的配置 安装完android studio之后配置https://blog.csdn.net/yw00yw/article/details/89212124 (目前都这样配置了,但还是没打包成功)  报错如上:有大神知道的指点一二! 更新:第二天突然好了.( ionic start angularIonic tabs //新建的项目 就可以打包) 本人的详细步骤: 1:  2:变量名: ANDROID_HOME 变量值: C:\Users\xxx\AppData\Local\Android\Sdk 变量名: GRADLE_HOME 变量值: C:\Users\xxx\AppData\Local\Android\gradle-5.4.1  %ANDROID_HOME%\tools%ANDROID_HOME%\platform-tools%GRADLE_HOME%\bin   检查是否安装成功adbgradle -v 注意:--->完事后应该要重启电脑--->不然配置的变量貌似不生效,才会报上面的错 |
【本文地址】
今日新闻 |
推荐新闻 |